import { useIntersectionObserver } from '@vueuse/core';
import { onBeforeMount, onMounted, ref } from "vue"

// 组件数据懒加载hooks
const useLazyData = (cb: () => void) => {
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (!isIntersecting) return
    // 把发请求的函数作为参数传进去
    cb()
    stop()
  },
    // 阈值 => 盒子与显示部分的比例 默认是0.3
    {
      threshold: 0
    })
  return target
}

// 动态获取屏幕滚动条的Y值 pageY
const useScrollY = () => {
  const scroll = ref(0)
  // 需要等DOM加载完，所以需要再onMounted中注册时间，因为后面需要注销事件，所以提取出来函数
  const onSrcoll = () => {
    scroll.value = document.documentElement.scrollTop || document.body.scrollTop
  }
  // 给DOM注册监听事件，获取滚动距离，动态设置类
  // 需要等DOM加载完，所以需要再onMounted中注册时间，因为后面需要注销事件，所以提取出来函数
  onMounted(() => {
    window.addEventListener('scroll', onSrcoll)
  })

  onBeforeMount(() => {
    window.removeEventListener('scroll', onSrcoll)

  })
  return scroll
}

export { useLazyData, useScrollY }

